<template>
  <div class="account_tab">
    <!-- 页面主体 -->
    <div class="tab-view data-view">
      <div class="panel-title clearfix">
        <div class="search_box">
          <el-button size="mini" @click="createAccount">创建账号</el-button>
        </div>
      </div>
      <div class="panel-table">
        <el-table :data="accountTableData"
                  size="small"
                  highlight-current-row
                  :cell-style="addStyle"
                  style="width: 100%">
          <el-table-column prop="username"
                           label="账号"
                           align="left"
                           :resizable = "false">
          </el-table-column>
          <el-table-column prop="staff_name"
                           align="left"
                           :resizable = "false"
                           label="员工姓名">
            <template slot-scope="scope">{{ scope.row.staff_name !== null && scope.row.staff_name !== undefined ? scope.row.staff_name : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column prop="phone"
                           align="left"
                           :resizable = "false"
                           label="联系方式">
            <template slot-scope="scope">{{ scope.row.phone !== null && scope.row.phone !== undefined ? scope.row.phone : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column prop="parent_name"
                           align="left"
                           :resizable = "false"
                           label="创建人">
            <template slot-scope="scope">{{ scope.row.parent_name !== null && scope.row.parent_name !== undefined && scope.row.parent_name !== '' ? scope.row.parent_name : '-' }}</template>
          </el-table-column>
          <el-table-column prop="role_names"
                           align="left"
                           :resizable = "false"
                           label="角色">
            <template slot-scope="scope">{{ scope.row.role_names !== null && scope.row.role_names !== undefined ? scope.row.role_names[0]["name"] : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column prop="created_at"
                           align="left"
                           :resizable = "false"
                           label="创建时间">
            <template slot-scope="scope">{{ scope.row.created_at !== null && scope.row.created_at !== undefined ? scope.row.created_at : '暂无数据' }}</template>
          </el-table-column>
          <el-table-column align="left"
                           label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.username === currentUser">当前账号</span>
              <span v-else class="tool_desc">
                <el-button @click="checkAccount(scope.row)" type="text" size="small">查看</el-button>
                <el-button v-if="scope.row.can_edit" @click="editAccount(scope.row)" type="text" size="small">编辑</el-button>
                <el-button v-if="scope.row.can_delete" @click="deleteAccount(scope.row)" type="text" size="small">删除</el-button>
              </span>
            </template>
            <!-- <template slot-scope="scope" v-else>
              {{scope.row.account === currTableData[0].account ? '1' : '2'}}
            </template> -->
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination  @current-change="changePage"
                        :current-page="currentPage"
                        :page-sizes="[20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">

import { mapGetters } from 'vuex'
// import EchartComp from '@/components/echarts'
// 图标的配置文件
// import activenessEchartOption from './activenessEchartOption.js'

// element-ui
import { Table, TableColumn, Input, Button, MessageBox, Message, Pagination } from 'element-ui'

import { APIGetAccountList, APIDeleteAccount } from '@/api/settings.js'

export default {
  name: 'AccountTab',

  components: {
    // elementUI component
    elTable: Table,
    elTableColumn: TableColumn,
    elInput: Input,
    elButton: Button,
    elPagination: Pagination
  },

  created () {
    // init request
    // this.tabName = this.$route.query.tabName
    this.APIGetAccountList()
  },

  data () {
    return {
      accountTableData: [],
      total: null,
      currentPage: 1
    }
  },

  computed: {
    ...mapGetters([
      'mallId',
      'token',
      'userinfo'
    ]),
    currentUser () {
      return this.userinfo.username
    }
  },

  methods: {
    createAccount () {
      this.$router.push({
        name: 'CreateAccount',
        query: {
          tabName: 'accountTab'
        }
      })
    },
    checkAccount (row) {
      this.$router.push({
        name: 'CheckAccount',
        query: {
          tabName: 'accountTab',
          userid: row.id
        }
      })
    },
    editAccount (row) {
      this.$router.push({
        name: 'EditAccount',
        query: {
          tabName: 'accountTab',
          userid: row.id
        }
      })
    },
    // 删除
    deleteAccount: function (row) {
      MessageBox.confirm('<strong>确认要删除该员工？</strong>', '提示', {
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        APIDeleteAccount({userid: row.id}).then((res) => {
          Message({
            message: '删除成功',
            type: 'success'
          })
          // 删除之后 重新读取 数据
          APIGetAccountList({page: this.currentPage})
            .then((res) => {
              this.accountTableData = res.data.users.data
              this.total = res.data.users.total
              if (res.data.users.data === null && this.currentPage !== 1) {
                APIGetAccountList({ page: this.currentPage - 1 })
                  .then((res) => {
                    this.accountTableData = res.data.users.data
                    this.total = res.data.users.total
                  })
              }
            })
        })
      })
    },
    changePage (value) {
      this.currentPage = value
      this.APIGetAccountList(value)
    },
    // 表格单元格加样式
    addStyle ({row, column, rowIndex, columnIndex}) {
      if (row.role_names && row.role_names[0]['name'] === '高级管理员' && columnIndex === 4) {
        return { 'color': '#0abf5b' }
      }
    },
    // ======= API ==================
    APIGetAccountList (page) {
      APIGetAccountList({page})
        .then((res) => {
          this.accountTableData = res.data.users.data
          this.total = res.data.users.total
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .account_tab{
    .tab-view {
      .panel-title {
        .search_box{
          float: right;
          text-align: right;
          font-size: 16px;
          .el-button{
            background-color: #159bd5;
            color: #ffffff;
          }
        }
      }
      .panel-charts {
        padding: 20px 0;
        width: 100%;
        height: 350px;
      }
      .panel-table {
        padding: 10px 0;
        width: 100%;
        .tool_desc {
          .el-button {
            color: #2396f3;
          }
        }
      }
      .page {
        text-align: right;
      }
    }
  }
</style>
